import {useMemo, useState} from "react";
import {ActionSheet, Cell} from "@taroify/core";
import {View} from "@tarojs/components";
import "./index.scss";

interface Action {
    name: string;
    value: string;
}

interface TypeSelectorProps {
    value: string;
    onChange: (value: string) => void;
}

const TypeSelector: React.FC<TypeSelectorProps> = ({ value, onChange }) => {
    const [open, setOpen] = useState(false)
    const actions = [
        { name: "个人", value: "1" },
        { name: "团队", value: "2" },
    ]

    // 根据 value 设置初始显示值
    const displayValue = useMemo(() => {
        const selectedAction = actions.find(action => action.value === value)
        return selectedAction?.name || ''
    }, [value])

    return (
        <>
            <Cell 
                clickable 
                isLink 
                title="选择类型" 
                onClick={() => setOpen(true)}
            >
                <View className={displayValue ? 'has-value' : ''}>
                    {displayValue || '请选择'}
                </View>
            </Cell>
            <ActionSheet
                description="选择批量指派的订单类型"
                actions={actions}
                open={open}
                onSelect={(action: Action) => {
                    onChange(action.value)
                    setOpen(false)
                }}
                onClose={setOpen}
            />
        </>
    )
}

export default TypeSelector